<template>
  <div class="dangriyunli">
    <div class="dangriyunliTit">当日运力</div>
    <div ref="dangriyunli" class="dangriyunliCon">
      <div class="dangriyunliImg">
        <img class="bgImg" src="../../../../static/img/gif.gif" />
        <!-- <img class="fjImg" src="../../../../static/img/dangriyunli.gif" /> -->
        <div class="dangriyunliwz">
          <span class="dangriyunliwzTit">飞机</span>
          <div class="dangriyunliwzCon">
            <span>4</span>
            <span>架</span>
          </div>
        </div>
        <div class="dangriyunliwz1">
          <span class="dangriyunliwzTit">装卸</span>
          <div class="dangriyunliwzCon">
            <span>1</span>
            <span>架</span>
          </div>
        </div>
        <div class="dangriyunliwz2">
          <span class="dangriyunliwzTit">在途</span>
          <div class="dangriyunliwzCon">
            <span>2</span>
            <span>架</span>
          </div>
        </div>
        <div class="dangriyunliwz3">
          <span class="dangriyunliwzTit">在港</span>
          <div class="dangriyunliwzCon">
            <span>1</span>
            <span>架</span>
          </div>
        </div>
      </div>

      <div class="listWrap">
        <div class="listTit">
          <span>航班</span>
          <span>航司</span>
          <span>起飞地</span>
          <span>在途情况</span>
        </div>
        <div class="swiper-container swiper-container1 listCon">
          <div class="swiper-wrapper">
            <div class="swiper-slide list">
              <span>5C811</span>
              <span>5C</span>
              <span>LGG</span>
              <span>在港</span>
            </div>
            <div class="swiper-slide list">
              <span>5C812</span>
              <span>5C</span>
              <span>CGO</span>
              <span>装卸</span>
            </div>


            <div class="swiper-slide list">
              <span>K4816</span>
              <span>KALITTA</span>
              <span>JFK</span>
              <span>在途</span>
            </div>
            <div class="swiper-slide list">
              <span>K4815</span>
              <span>KALITTA</span>
              <span>CGO</span>
              <span>在途</span>
            </div>

          </div>
        </div>
        <div class="listBtn" @click="showList">
          <span>&lt;&lt;&lt;</span>
          <span>更多</span>
          <span>&gt;&gt;&gt;</span>
        </div>

      </div>


    </div>
    <div v-if="listTckShow" class="listTckWrap">
      <div class="listTckTit">当日航班运力详情</div>
      <img class="listTckGb" src="../../../../static/img/guanbi.png" @click="hideList" />
      <div class="listTckCon">
        <div class="listTckConTit">
          <span>航班号</span>
          <span>航司</span>
          <span>起飞地</span>
          <span>目的地</span>
          <span class="width13">（计划）起飞时间</span>
          <span class="width13">（计划）到达时间</span>
          <span>在途情况</span>
          <span>是否延误</span>
          <span class="width13">预计到达时间</span>
        </div>
        <div class="listTckConTxt">
          <div class="listTckConTxtList listTckConTxtListbg">
            <span>5C811</span>
            <span>5C</span>
            <span>列日</span>
            <span>郑州</span>
            <span class="width13">2021-3-22 19:30</span>
            <span class="width13">2021-3-23 05:30</span>
            <span>在途</span>
            <span>否</span>
            <span class="width13">2021-3-23 05:30</span>
          </div>
          <div class="listTckConTxtList listTckConTxtListbg">
            <span>5C812</span>
            <span>5C</span>
            <span>郑州</span>
            <span>列日</span>
            <span class="width13">2021-3-22 9:00</span>
            <span class="width13">2021-3-22 20:30</span>
            <span>在途</span>
            <span>否</span>
            <span class="width13">2021-3-22 20:30</span>
          </div>
          <div class="listTckConTxtList ">
            <span>5C1811</span>
            <span>5C</span>
            <span>列日</span>
            <span>郑州</span>
            <span class="width13">2021-3-22 9:00</span>
            <span class="width13">2021-3-22 20:30</span>
            <span>在途</span>
            <span>否</span>
            <span class="width13">2021-3-22 20:30</span>
          </div>
          <div class="listTckConTxtList ">
            <span>5C1812</span>
            <span>5C</span>
            <span>列日</span>
            <span>郑州</span>
            <span class="width13">2021-3-22 14:00</span>
            <span class="width13">2021-3-23 1:30</span>
            <span>在途</span>
            <span>否</span>
            <span class="width13">2021-3-23 1:30</span>
          </div>
          <div class="listTckConTxtList">
            <span>K4816</span>
            <span>KALITTA</span>
            <span>纽约</span>
            <span>郑州</span>
            <span class="width13">2021-3-22 16:00</span>
            <span class="width13">2021-3-23 16:15</span>
            <span>在途</span>
            <span>否</span>
            <span class="width13">2021-3-23 16:15</span>
          </div>
          <div class="listTckConTxtList">
            <span>K4815</span>
            <span>KALITTA</span>
            <span>郑州</span>
            <span>纽约</span>
            <span class="width13">2021-3-22 19:15</span>
            <span class="width13">2021-3-23 12:45</span>
            <span>在途</span>
            <span>否</span>
            <span class="width13">2021-3-23 12:45</span>
          </div>
          <div class="listTckConTxtList">
            <span>K4814</span>
            <span>KALITTA</span>
            <span>洛杉矶</span>
            <span>郑州</span>
            <span class="width13">2021-3-22 19:15</span>
            <span class="width13">2021-3-23 15:30</span>
            <span>在途</span>
            <span>否</span>
            <span class="width13">2021-3-23 15:30</span>
          </div>
          <div class="listTckConTxtList">
            <span>K4813</span>
            <span>KALITTA</span>
            <span>郑州</span>
            <span>洛杉矶</span>
            <span class="width13">2021-3-22 18:30</span>
            <span class="width13">2021-3-23 10:15</span>
            <span>在途</span>
            <span>否</span>
            <span class="width13">2021-3-23 10:15</span>
          </div>
        </div>
      </div>

    </div>
  </div>

</template>

<script>
  export default {
    name: 'dangriyunli',
    components: {

    },
    data() {
      return {
        listTckShow: false,
      }
    },
    mounted() {
      let swiper3 = new Swiper('.swiper-container1', {
        direction: 'vertical',
        slidesPerView: 4,
        //循环播放
        loop: true,
        // 自动播放时间
        autoplay: true,
        // 播放的速度
        speed: 2000,
      });
    },
    methods: {
      showList() {
        this.listTckShow = true
      },
      hideList() {
        this.listTckShow = false
      },
    }
  }
</script>

<style scoped>
  .dangriyunli {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
  }


  .dangriyunliTit {
    height: .3rem;
    width: 100%;
    background: url(../../../../static/img/dangriyunli.png) no-repeat;
    /* background-size: 50% 80%; */
    line-height: .3rem;
    font-size: .16rem;
    color: #fff;
    padding: 0 .1rem;
    letter-spacing: 1px;
    /* margin-bottom: .2rem; */
  }

  .dangriyunliCon {
    width: 100%;
    height: 85%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .dangriyunliImg {
    width: 52%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* transform: scale(0.85); */
    margin-left: -5%;
  }

  .bgImg {
    width: 135%;
    height: 90%;
    transform: scale(1);
  }

  .fjImg {
    position: absolute;
    left: 8;
    /* right: 0; */
    top: 9;
    /* bottom: 0; */
    /* margin: auto; */
  }

  .dangriyunliwz {
    position: absolute;
    top: 18%;
    left: 52%;
  }

  .dangriyunliwz {
    position: absolute;
    top: 22%;
    left: 48%;
  }

  .dangriyunliwz1 {
    position: absolute;
    bottom: 24%;
    left: -3%;
    transform: scale(0.8);
  }

  .dangriyunliwz2 {
    position: absolute;
    bottom: 8%;
    left: 33%;
    transform: scale(0.8);
  }

  .dangriyunliwz3 {
    position: absolute;
    top: 39%;
    right: -3%;
    transform: scale(0.8);
  }

  .dangriyunliwzTit {
    font-size: .14rem;
    color: #fff;
  }

  .dangriyunliwzCon {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: .1rem;
  }

  .dangriyunliwzCon>span:nth-of-type(1) {
    color: #eefd7e;
    font-size: .20rem;
  }

  .dangriyunliwzCon>span:nth-of-type(2) {
    color: #fff;
    font-size: .12rem;
  }

  .listWrap {
    width: 48%;
    height: 80%;
    background-image: url(../../../../static/img/zuoshangjiao.png), url(../../../../static/img/youshangjiao.png), url(../../../../static/img/youxiajiao.png), url(../../../../static/img/zuoxiajiao.png);
    background-color: rgba(11, 50, 130, .6);
    background-position: left top, right top, right bottom, left bottom;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    /* border: 1px solid #6b85c0; */
    padding: .1rem .15rem;
    box-sizing: border-box;
    z-index: 10;
    isplay: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .listTit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: .3rem;
    position: relative;
    font-size: .12rem;

  }


  .listTit::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 95%;
    background: #4ac5d9;
    bottom: 1px;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .listTit>span {
    font-size: .1rem;
    /* color: #4077aa; */
    color: #fff;
    text-align: center;
  }

  .listTit>span {
    width: 24%;
    text-align: center;
  }

  .listTit>span:nth-last-of-type(1) {
    width: 28%;
  }

  .listCon {
    width: 100%;
    height: 70%;
    overflow: hidden;
  }

  .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: .3rem;
  }

  .list>span {
    font-size: .1rem;
    /* color: #4077aa; */
    color: #fff;
    text-align: center;
  }

  .list>span {
    width: 24%;
    text-align: center;
  }

  .list>span:nth-last-of-type(1) {
    width: 28%;
  }

  .listBtn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: .12rem;
    color: #04d7ea;
    margin: 0 auto;
    flex: 1;
    cursor: pointer;
  }

  .listTckWrap {
    width: 140%;
    height: 100%;
    background: url(../../../../static/img/tanchuang.png) no-repeat;
    background-size: 100% 100%;
    z-index: 12;
    position: absolute;
    left: 0;
    top: -.16rem;
  }

  .listTckGb {
    position: absolute;
    right: 0;
    top: .3rem;
    cursor: pointer;
  }

  .listTckTit {
    line-height: .34rem;
    font-size: .18rem;
    color: #fff;
    text-align: center;
    width: 100%;
    letter-spacing: 1px;

  }

  .listTckCon {
    padding: .16rem;
   /* display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; */
    margin-top: .08rem;
   box-sizing: border-box;
   height: 100%;
   width: 100%;
  }

  .listTckConTit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: .3rem;
    background: rgba(2, 112, 147, .6);
  }

  .listTckConTit>span {
    width: 8.17%;
    color: #fff;
    font-size: .12rem;
    text-align: center;
  }

  .listTckConTit>span.width13 {
    width: 17%;
  }

  .listTckConTxt {
    width: 100%;
    height: 65%;
    /* flex: 1; */
    overflow: auto;
  }

  .listTckConTxtList {
    width: 100%;
    height: .25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .listTckConTxtListbg{
    background: rgba(1, 63, 104, .8);
  }

  .listTckConTxtList:hover {
    background: rgba(1, 63, 104, .8);
  }

  .listTckConTxtList>span {
    width: 8.17%;
    color: #fff;
    font-size: .12rem;
    text-align: center;
  }

  .listTckConTxtList>span.width13 {
    width: 17%;
  }
</style>
